{template 'common/header'}
<style>
	body{background:#EEE;}
	.container-fill{padding:.5em;}
	h4{margin:20px 0;}
	h4:first-of-type{margin-top:10px;}
	.panel{padding:.5em; margin-bottom:10px;}
	.nav.nav-tabs{margin-bottom:.8em;}
	.alert .form-group{margin-bottom:0;}
	label.form-group{display:block;}
	.steps{margin:10px 0;}
	.steps .fa{color:#428bca;}
	.steps .help-block{font-size:12px;}
	label.form-group{font-weight:normal; overflow:hidden; border-top:1px #DDD solid; padding-top:20px; }
	label.form-group input[name="type"]{opacity:0; width:0;}
</style>
<script>
	require(['angular', 'bootstrap', 'util'], function(angular, $, u){
		$(function(){
			$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
				var from = $(e.relatedTarget).attr('href');
				var to = $(e.delegateTarget).attr('href');
				if($(to).index() < $(from).index()) {
					$(to).removeClass('fadeInRight fadeInLeft').addClass('fadeInLeft');
				} else {
					$(to).removeClass('fadeInRight fadeInLeft').addClass('fadeInRight');
				}
			});
		});
	});
</script>
<h4>订单信息</h4>
<div class="panel">
	<div class="clearfix" style="padding-top:10px;">
		<p>订单编号 :<span class="pull-right">{$params['ordersn']}</span></p>
		<p>商家名称 :<span class="pull-right">{$params['title']}</span></p>
		<p>支付金额 :<span class="pull-right">{php echo sprintf('%.2f', $params['fee']);}<span class="muted"> 元</span></span></p>
	</div>
</div>
<h4>选择支付方式</h4>
<ul class="nav nav-tabs" role="tablist" style="margin-bottom:0;">
	<li class="active"><a href="#direct" role="tab" data-toggle="tab" style="border-left:0;">直接到账</a></li>
	{if $pay['delivery']['switch']}<li><a href="#collect" role="tab" data-toggle="tab">货到付款</a></li>{/if}
	<!--li><a href="#">微擎担保</a></li-->
</ul>
<div class="panel ng-container" ng-controller="loginPanel" style="border-top-left-radius:0; border-top-right-radius:0;">
	<div class="tab-content">
		<div class="tab-pane animated active fadeInLeft" id="direct">
			<div class="steps">
				<div class="row text-center">
					<div class="col-xs-6">
						<span class="fa-stack fa-2x">
							<i class="fa fa-adjust fa-stack-2x"></i>
						</span>
						<div class="help-block">付款给商家</div>
					</div>
					<div class="col-xs-6">
						<span class="fa-stack fa-2x">
							<i class="fa fa-circle-o fa-stack-2x"></i>
						</span>
						<div class="help-block">商家收款后发货</div>
					</div>
				</div>
			</div>
			<div class="clearfix">
				{if !empty($pay['credit']['switch'])}
				<label class="form-group">
					<div class="col-xs-2">
						<input type="radio" name="type" value="credit">
						<i class="fa fa-check-circle text-muted"></i>
					</div>
					<div class="col-xs-10">
						使用账户余额支付
						<div class="help-block">当前账户余额 {php echo sprintf('%.2f', $credtis[$setting['creditbehaviors']['currency']]);}</div>
					</div>
				</label>
				{/if}
				{if !empty($pay['wechat']['switch'])}
				<label class="form-group">
					<div class="col-xs-2">
						<input type="radio" name="type" value="wechat">
						<i class="fa fa-check-circle text-muted"></i>
					</div>
					<div class="col-xs-10">
						使用微信支付
						<div class="help-block">每笔最高1万, 每日限额1万</div>
					</div>
				</label>
				{/if}
				{if !empty($pay['alipay']['switch'])}
				<label class="form-group">
					<div class="col-xs-2">
						<input type="radio" name="type" value="alipay">
						<i class="fa fa-check-circle text-muted"></i>
					</div>
					<div class="col-xs-10">
						使用支付宝支付
						<div class="help-block">每笔最高3万, 每日限额5万</div>
					</div>
				</label>
				{/if}
			</div>
		</div>
		<div class="tab-pane animated" id="collect">
			{if $pay['delivery']['switch']}
			<div class="steps">
				<div class="row text-center">
					<div class="col-xs-4">
						<span class="fa-stack fa-2x">
							<i class="fa fa-adjust fa-stack-2x"></i>
							<i class="fa fa-rotate-90 fa-adjust fa-stack-2x"></i>
						</span>
						<div class="help-block">在系统下订单</div>
					</div>
					<div class="col-xs-4">
						<span class="fa-stack fa-2x">
							<i class="fa fa-adjust fa-stack-2x"></i>
						</span>
						<div class="help-block">商家发货</div>
					</div>
					<div class="col-xs-4">
						<span class="fa-stack fa-2x">
							<i class="fa fa-circle-o fa-stack-2x"></i>
						</span>
						<div class="help-block">送货上门收款</div>
					</div>
				</div>
			</div>
			<div class="clearfix">
				<label class="form-group">
					<div class="col-xs-2">
						<input type="radio" name="type" value="delivery">
						<i class="fa fa-check-circle text-muted"></i>
					</div>
					<div class="col-xs-10">
						货到付款
						<div class="help-block">验货后付款, 网购更安心</div>
					</div>
				</label>
			</div>
			{/if}
		</div>
		<div class="tab-pane animated" id="guarantee">
			<div class="alert alert-info">
				<div class="row text-center">
					<div class="col-xs-4">
						<span class="fa-stack fa-2x">
							<i class="fa fa-adjust fa-stack-2x"></i>
							<i class="fa fa-rotate-90 fa-adjust fa-stack-2x"></i>
						</span>
						<div class="help-block">付款给微擎</div>
					</div>
					<div class="col-xs-4">
						<span class="fa-stack fa-2x">
							<i class="fa fa-adjust fa-stack-2x"></i>
						</span>
						<div class="help-block">发货/您确认收货</div>
					</div>
					<div class="col-xs-4">
						<span class="fa-stack fa-2x">
							<i class="fa fa-circle-o fa-stack-2x"></i>
						</span>
						<div class="help-block">微擎付款给商家</div>
					</div>
				</div>
			</div>
			<div class="alert alert-info clearfix">
				<label class="form-group">
					<div class="col-xs-1">
						<input type="radio" name="type" value="alipay" checked>
					</div>
					<div class="col-xs-11">
						担保支付
						<div class="help-block">还未支持</div>
					</div>
				</label>
			</div>
		</div>
	</div>
</div>
<input type="hidden" name="token" value="{$_W['token']}" />
{if !empty($pay['alipay']['switch'])}
<div class="pay-btn" id="alipay-panel" style="display:none;">
	<form action="{php echo url('mc/cash/alipay');}" method="post">
		<input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
		<button class="btn btn-warning btn-block btn-lg" type="submit" name="alipay">支付宝支付</button>
	</form>
</div>
{/if}
{if !empty($pay['wechat']['switch'])}
<div class="pay-btn" id="wechat-panel" style="display:none;">
	<form action="{php echo url('mc/cash/wechat');}" method="post">
		<input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
		<button class="btn btn-warning btn-block btn-lg" disabled="disabled" type="submit" id="wBtn" value="wechat">微信支付(必须使用微信内置浏览器)</button>
	</form>
</div>
<script type="text/javascript">
	document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
		$('#wBtn').removeAttr('disabled');
		$('#wBtn').html('微信支付');
	});
</script>
{/if}

{if !empty($pay['credit']['switch'])}
<div class="pay-btn" id="credit-panel" style="display:none;">
	<form action="{php echo url('mc/cash/credit');}" method="post">
		<input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
		<button class="btn btn-warning btn-block btn-lg" type="submit" value="credit">余额支付 （余额支付当前 {php echo sprintf('%.2f', $credtis[$setting['creditbehaviors']['currency']]);}元)</button>
	</form>
</div>
{/if}

{if $pay['delivery']['switch']}
<div class="pay-btn" id="delivery-panel" style="display:none;">
	<form action="{php echo url('mc/cash/delivery');}" method="post">
		<input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
		<button class="btn btn-warning btn-block btn-lg" type="submit" value="delivery">货到付款</button>
	</form>
</div>
{/if}

<div class="pay-btn" id="default-panel">
	<button type="submit" name="submit" value="yes" class="btn btn-primary btn-block btn-lg disabled">请选择支付方式</button>
</div>
<script type="text/javascript">
	require(['jquery', 'util'], function($, u){
		$('input[name="type"]').click(function(){
			$('label.form-group .fa').removeClass('text-danger');
			$(this).parents('.form-group').find('.fa').addClass('text-danger');
			$('.pay-btn').hide();
			$('#'+$(this).val()+'-panel').show();
		});

		$('.nav li').click(function(){
			$('.pay-btn').hide();
			$('#default-panel').show();
			$('input[name="type"]').attr('checked',false);
		});
	});
</script>
{template 'common/footer'}